<script setup lang="ts">
import { api, pageApi } from '@/MainApp/apis/application'

const props = defineProps({
  application: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['save'])

const limitLength = useLength()
const { msgError, msgSuccess } = useMessage()

const typeOptions = ref([
  { label: '平台应用', value: 'PLATFORM' },
  { label: '第三方应用', value: 'THIRD_PARTY' }
])

const formRef = ref<any>(null)

class FormModel {
  id: string = ''
  // 应用名称
  name: string = ''
  // PLATFORM | THIRD_PARTY
  type: string = 'PLATFORM'
  // 首页地址
  indexPath: string = ''
  // 图标
  icon: string = ''
  // 图标背景色
  iconBackground: string = ''
  // 描述
  remark: string = ''
}

const formModel = reactive<any>(new FormModel())
copyValue(formModel, props.application)

const state = reactive({
  loading: false,
  pageList: []
})

const indexPathOptions = computed<any[]>(() => state.pageList.filter((item: any) => item.link))

const loadPageList = async () => {
  const res: any = await pageApi.listPageByAppId(props.application.id)
  if (!res.success) {
    msgError(res.msg)
    return
  }
  state.pageList = res.data
}

onMounted(() => {
  loadPageList()
})

const submit = async () => {
  try {
    await formRef.value?.validate()
  }
  catch (err) {
    console.error(err)
    return
  }
  const params = {
    ...formModel
  }

  state.loading = true
  const res = await api.update(params)
  state.loading = false
  if (!res.success) {
    //
    msgError(res.msg)
    return
  }
  msgSuccess(res.msg)

  console.log('before save', res.data)

  emit('save', res.data)
}
</script>

<template>
  <div class="application-setting">
    <div class="left-bar">
      <el-menu default-active="1">
        <el-menu-item index="1">
          <template #title>
            <!-- IkSvgIcon -->
            <span>
              <IkSvgIcon
                :size="18"
                :start-margin="false"
                disabled
                name="iksvg_shezhi2"
              />
              <span>{{ '基础设置' }}</span>
            </span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main-content">
      <div class="main-content-boday">
        <el-form
          ref="formRef"
          label-position="top"
          class="form"
          :model="formModel"
        >
          <el-form-item label="应用名称" prop="name" :rules="[{ required: true, message: '请输入应用名称' }]">
            <el-input
              v-model="formModel.name"
              placeholder="请输入应用名称"
              :maxlength="limitLength.lenName"
              show-word-limit
              clearable
            />
          </el-form-item>
          <el-form-item label="应用图标">
            <IkFlowIconPicker v-model="formModel.icon" v-model:iconBackground="formModel.iconBackground" />
          </el-form-item>
          <el-form-item label="类型">
            <el-radio-group v-model="formModel.type">
              <el-radio v-for="item in typeOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="首页地址">
            <!-- <el-input
              v-model="formModel.indexPath"
              placeholder="请输入首页地址"
              :maxlength="limitLength.lenLink"
              show-word-limit
              clearable
            /> -->

            <el-select v-model="formModel.indexPath" placeholder="请选择首页地址">
              <el-option
                v-for="item in indexPathOptions"
                :key="item.id"
                :label="item.name"
                :value="item.link"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="应用描述">
            <el-input
              v-model="formModel.remark"
              type="textarea"
              placeholder="请输入应用描述"
              :maxlength="limitLength.lenContent"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <div class="footer">
          <el-button type="primary" class="save-button" @click="submit">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.application-setting {
  display: flex;

  .left-bar {
      width: 290px;
      flex-shrink: 0;
      background-color: var(--color-bg-page-content);
      padding: 16px;

      :deep(.el-menu){
        --el-menu-base-level-padding: 10px;

        border-right: none;

        .el-menu-item{
          height: 40px;
          border-radius: var(--border-radius-normal);
        }

        .el-menu-item.is-active {
          background-color: var(--color-bg-page-tag);
          color: var(--color-font-normal);
        }
      }

    }

    .main-content{
      flex-grow: 1;
      padding: 28px 28px 20px;

      .main-content-boday{
        height: 100%;
        background-color: var(--color-bg-page-content);
        display: flex;
        flex-direction: column;

        .form{
          width: 50%;
          flex-grow: 1;
          padding: 32px;
        }

        .footer{
          flex-shrink: 0;
          height: 60px;
          border-top: 1px solid var(--color-divider);
          display: flex;
          align-items: center;
          justify-content: end;
          padding-right: 28px;

          .save-button{
            min-width: 88px;
          }
        }
      }
    }

}
</style>
